<template>
    <div class="venue-container">
        <div class="venue-list">
            <h3>选择分会场场次(最多可报名2场)</h3>
            <van-checkbox-group v-model="checkedList" :max="2">
                <van-checkbox :name="item.ID" v-for="(item,index) in venueList" :key="index" :disabled="item.UseNumber<1">
                    <div class="label-left">
                        <h3 class="venue-title">{{item.Name}}</h3>
                        <p class="venue-time">{{item.Content}}</p>
                    </div>
                    <div class="label-right" v-if="item.UseNumber>0">余票<span>{{item.UseNumber}}</span>张</div>
                    <div class="label-right" v-else>已售罄</div>                             
                </van-checkbox>                                
            </van-checkbox-group>
        </div>
        <div class="venue-btn">
            <van-button type="primary" @click="skipCheck">跳过</van-button>
            <van-button type="primary" @click="submitCheck">提交</van-button>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "BranchVenue",
  data() {
    return {
      checkedList: [],
      venueList: []
    };
  },
  created() {
    var that = this;
    $.ajax({
      type: "POST",
      url: that.baseUrl + "/api/prectice/getSubPrecticeByTime",
      data: {
        Time: that.$route.params.date,
        ST: that.$route.params.nst
      },
      success: function(res) {
        if (res.State) {
          that.venueList = res.Data;
        } else {
          that.$toast(res.Message);
        }
      }
    });
  },
  methods: {
    signUp(id){
        var that = this
        this.$toast.loading({
        mask: true,
        message: "正在提交...",
        duration: 0
      });
        $.ajax({
            type:'POST',
            url:that.baseUrl+'/api/prectice/addAttendUser',
            data:{
                ID:that.$route.params.id,
                ST: that.$route.params.nst,
                RoomTypeID:id,
                AboutUs:that.$route.params.date
            },
            success:function(res){
                that.$toast.clear()
                if(res.State){ 
                    that.$toast.loading({
                        mask: true,
                        message: "正在提交..."
                    });
                    setTimeout(()=>{
                        window.location.href =
                        that.baseUrl +
                        "/Q/" +
                        that.$route.params.st +
                        "/true?phone=" +
                        that.$route.params.phone;
                    },3000)                    
                }else{
                    that.$toast(res.Message)
                }
            }
        })
    },
    signUpTwo(){
      var that = this
        this.$toast.loading({
        mask: true,
        message: "正在提交...",
        duration: 0
      });
        $.ajax({
            type:'POST',
            url:that.baseUrl+'/api/prectice/addAttendUser',
            data:{
                ID:that.$route.params.id,
                ST: that.$route.params.nst,
                RoomTypeID:that.checkedList[0],
                AboutUs:that.$route.params.date
            },
            success:function(res){
                that.$toast.clear()
                if(res.State){ 
                    that.signUp(that.checkedList[1])        
                }else{
                    that.$toast(res.Message)
                }
            }
        })
    },
    skipCheck() {
      var that = this;
      this.$dialog
        .confirm({
          title: "确认跳过选择分会场场次？"
        })
        .then(() => {
          window.location.href =
            that.baseUrl +
            "/Q/" +
            that.$route.params.st +
            "/true?phone=" +
            that.$route.params.phone;
        });
    },
    submitCheck() {
        if(this.checkedList.length==1){
            this.signUp(this.checkedList[0]) 
        }else if(this.checkedList.length==2){
            this.signUpTwo()
        }else{
            this.$toast('请先选择分会场场次')
        }
    }
  }
};
</script>

<style>
.venue-container {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  padding: 4vw 4vw 50px 4vw;
}
.venue-list > h3 {
  width: 100%;
  text-align: left;
  font-size: 1.125em;
  color: #4d4d4d;
  font-weight: normal;
  margin: 0 0 10px 0;
}
.venue-list .van-checkbox-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.venue-list .van-checkbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.venue-list .van-checkbox__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
  margin: 5px 0;
  padding: 5px 10px;
  border-radius: 4px;
  color: #999;
}
.van-checkbox__icon--checked + .van-checkbox__label {
  border-color: #30aefb;
  color: #30aefb;
}
.van-checkbox__icon--checked + .van-checkbox__label>.label-right>span{
    color: #30aefb;
}
.van-checkbox__icon--disabled+ .van-checkbox__label {
  background: #e6e6e6;
}
.venue-list .van-checkbox i.van-icon {
  display: none;
}
.venue-title {
  width: 100%;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  margin: 0 0 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.venue-time {
  width: 100%;
  font-size: 0.9em;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.venue-btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}
.venue-btn .van-button.van-button--primary.van-button--normal {
  width: 50%;
  border: 0;
  border-radius: 0;
}
.label-left{
    max-width: 80%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.label-right{
    font-size: 0.9em;
    max-width: 20%;
}
.label-right>span{
    font-size: 1.5em;
    color: #fba330;
}
.venue-btn .van-button:first-child {
  background: #999;
}
.venue-btn .van-button:last-child {
  background: #30aefb;
}
</style>
